<template>
    <view class="content">
        <view class="none-tab-content">
            <view class="navbar">
                <view v-for="(item, index) in navList" :key="index" class="nav-item"
                    :class="{current: tabCurrentIndex === index}" @click="tabClick(index)">
                    {{item.text}}
                    <i class="plus"></i>
                </view>
            </view>
            <swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
                <swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
                    <scroll-view @refresherrefresh="refreshList" :refresher-triggered="triggered" refresher-enabled
                        class="list-scroll-content" scroll-y><!-- //@scrolltolower="loadData('add')" -->
                        <!-- 空白页 -->
                        <u-empty v-if="filterList==null||filterList.length === 0" mode="order"></u-empty>

                        <!-- 订单列表 -->
                        <view v-for="(item,index) in filterList" :key="index" class="order-item">
                            <view class="i-top b-b">
                                <text class="time"
                                    @click="showOrderDetail(item.orderId)">发起时间：{{item.createTime | formatDateTime}}</text>
                                <text class="state" :style="{color: '#fa436a'}">{{item.status | formatStatus}}</text>
                                <text class="del-btn yticon icon-iconfontshanchu1" @click="deleteOrder(item)"></text>
                            </view>
                            <view v-for="(prod, prodIndex) in item.prods" :key="itemIndex" class="product-info">
                                <u--image :showLoading="true" :src="prod.image" width="90px" height="90px"
                                    @click="click"></u--image>
                                <view class="product-details">
                                    <view class="product-name">{{ prod.prodName }}</view>
                                    <view v-if="item.status > 1">
                                        <view class="product-description">
                                            {{ `${extractKeyValueFromString(prod.priceRules).key} ${formatMoney(extractKeyValueFromString(prod.priceRules).value)}元/${prod.prodUnit}; x${prod.prodCount}${prod.prodUnit}`}}
                                        </view>
                                        <view class="product-price">¥ {{ formatMoney(prod.mayAmount) }}</view>
                                    </view>
                                    <view v-else>
                                        <view class="product-description">档口：{{ item.stallNum || '无' }}</view>
                                        <view class="product-price">司机电话：{{ item.senderPhone || '无' }}</view>
                                        <view class="product-price">卸货时间：{{ item.unloadTime || '无' }}</view>
                                    </view>
                                </view>
                            </view>
                            <text style="padding-right: 30rpx; text-align: right;">
                                共{{ item.prods.length }}类货品
                                <text v-if="item.status > 1">
                                    , {{`${item.status>2?'实际':'预估' }`}}付款
                                    <text style="color: red;">
                                        ¥{{ formatMoney(item.status>2?item.payAmount:item.totalAmount) }}
                                    </text>
                                </text>
                            </text>
                            <view class="action-box b-t">
                                <button v-if='item.status == 2' class="action-btn recom" @click="payOrder(item.orderId)">支付</button>
                                <button class="action-btn" @click="showOrderDetail(item.orderId)">查看详情</button>
                            </view>
                        </view>
                        <uni-load-more :status="loadingType"></uni-load-more>

                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
        <tabBar selectedIndex=0></tabBar>
    </view>
</template>

<script>
    import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
    import empty from "@/components/empty";
    import {
        formatDate
    } from '@/utils/date';
    import {
        fetchOrderList,
        cancelUserOrder,
        confirmReceiveOrder,
        deleteUserOrder
    } from '@/api/order.js';
    import {
        orderApi
    } from '../../api';
    import {
        User
    } from '../../utils';
    const navList = [{
            state: -1,
            text: '全部'
        },
        // {
        //     state: 0,
        //     text: '待分配'
        // },
        {
            state: 1,
            text: '待卸货'
        },
        {
            state: 2,
            text: '待付款'
        },
        {
            state: 3,
            text: '已完成'
        },
        // {
        //     state: 4,
        //     text: '已关闭'
        // },
    ];
    export default {
        data() {
            return {
                tabCurrentIndex: 0,
                triggered: false,
                orderParam: {
                    status: -1,
                    pageNum: 1,
                    pageSize: 5
                },
                routePath: "/pages/boss/allOrder", // 路由地址  每个有该组件的都需要配置地址
                allList: [],
                filterList: [],
                loadingType: 'more',
                //顶部导航栏列表
                navList: navList,
            }
        },
        filters: {
            formatStatus(status) {
                const navItem = navList.find(item => item.state === status);
                return navItem ? navItem.text : '';
            },
            formatProductAttr(jsonAttr) {
                let attrArr = JSON.parse(jsonAttr);
                let attrStr = '';
                for (let attr of attrArr) {
                    attrStr += attr.key;
                    attrStr += ":";
                    attrStr += attr.value;
                    attrStr += ";";
                }
                return attrStr
            },
            formatDateTime(time) {
                if (time == null || time === '') {
                    return 'N/A';
                }
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            },
        },
        methods: {
            formatMoney(price) {
                if (price == null || price === '') {
                    return 'N/A';
                }

                // 将价格转换为以“元”为单位的小数
                const formattedPrice = (parseInt(price) / 100).toFixed(2);

                // 使用正则表达式添加千分位逗号
                return formattedPrice.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            },
            extractKeyValueFromString(str) {
                try {
                    // 将字符串解析为对象
                    const obj = JSON.parse(str);

                    // 从对象中提取 key 和 value
                    const {
                        key,
                        value
                    } = obj;

                    return {
                        key,
                        value
                    };
                } catch (error) {
                    console.error("Invalid JSON string:", error);
                    return null; // 如果解析失败，返回 null
                }
            },
            extractKeyValueFromString(str) {
                try {
                    // 将字符串解析为对象
                    const obj = JSON.parse(str);

                    // 从对象中提取 key 和 value
                    const {
                        key,
                        value
                    } = obj;

                    return {
                        key,
                        value
                    };
                } catch (error) {
                    console.error("Invalid JSON string:", error);
                    return null; // 如果解析失败，返回 null
                }
            },
            //顶部tab点击
            tabClick(index) {
                this.tabCurrentIndex = index;
            },
            showOrderDetail(orderId) {
                console.log(orderId);
                uni.navigateTo({
                    url: `/pages/order/orderDetail?orderId=${orderId}`
                });
            },
            changeTab(detail) {
                console.log(`切换导航栏`);
                if (detail) {
                    this.tabCurrentIndex = detail.detail.current;
                }
                console.log(`this.tabCurrentIndex: ${this.tabCurrentIndex}`);
                this.filterList = [];

                // 获取 navList 中所有的 state
                const navStates = navList.map(item => item.state);

                for (let order of this.allList) {
                    console.log(`order.status: ${order.status}, this.tabCurrentIndex: ${this.tabCurrentIndex}`);

                    // 找到当前 tab 对应的 state
                    const currentState = navList[this.tabCurrentIndex]?.state;

                    // 待分配包含在待卸货中
                    if ((this.tabCurrentIndex === 0 || currentState == 1) && "01".includes(order.status)) {
                        this.filterList.push(order);
                    }

                    // 如果当前 tab 为 "全部"，则检查状态是否在 navList 中
                    else if ((this.tabCurrentIndex === 0 && navStates.includes(order.status)) || order.status ===
                        currentState) {
                        this.filterList.push(order);
                    }
                }
            },

            async fetchOrderList() {
                uni.showLoading({
                    title: "请稍后"
                })
                const {
                    code,
                    data
                } = await orderApi.getListByShop({
                    "userId": User.get().userId,
                });
                uni.hideLoading();
                if (code == 200) {
                    this.allList = data;
                    console.log(data)
                    this.changeTab();
                }
            },
            refreshList() {
                if (!this.triggered) {
                    this.triggered = true;
                    this.fetchOrderList();
                    setTimeout(() => {
                        this.triggered = false;
                    }, 1000)
                }
            },
			payOrder(orderId){
				console.log(orderId);
			}

        },

        onShow() {
            this.changeTab();
            uni.hideTabBar({
                animation: false
            })
        },
        mounted() {
            this.fetchOrderList();
        }
    }
</script>
<style lang="scss">
    page,
    .content {
        background: $page-color-base;
        height: 100%;
    }

    .none-tab-content {
        height: calc(100% - 140rpx);
    }

    .swiper-box {
        height: calc(100% - 40px);
    }

    .list-scroll-content {
        height: 100%;
    }

    button {
        .disabled {
            color: #8c8c8c;
            background-color: #f5f5f5;
        }
    }

    .navbar {
        display: flex;
        height: 40px;
        padding: 0 5px;
        background: #fff;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
        position: relative;
        z-index: 10;

        .nav-item {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            font-size: 15px;
            color: $font-color-dark;
            position: relative;

            &.current {
                color: $base-color;

                &:after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);
                    width: 44px;
                    height: 0;
                    border-bottom: 2px solid $base-color;
                }
            }
        }

        .plus {
            margin-left: 5px;
        }
    }

    .uni-swiper-item {
        height: auto;
    }

    .order-item {
        display: flex;
        flex-direction: column;
        padding-left: 30upx;
        background: #fff;
        margin-top: 16upx;

        .i-top {
            display: flex;
            align-items: center;
            height: 80upx;
            padding-right: 30upx;
            font-size: $font-base;
            color: $font-color-dark;
            position: relative;

            .time {
                flex: 1;
            }

            .state {
                color: $base-color;
            }

            .del-btn {
                padding: 10upx 0 10upx 36upx;
                font-size: $font-lg;
                color: $font-color-light;
                position: relative;

                &:after {
                    content: '';
                    width: 0;
                    height: 30upx;
                    border-left: 1px solid $border-color-dark;
                    position: absolute;
                    left: 20upx;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }



        /* 单条商品 */
        .goods-box-single {
            display: flex;
            padding: 20upx 0;

            .goods-img {
                display: block;
                width: 120upx;
                height: 120upx;
            }

            .right {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding: 0 30upx 0 24upx;
                overflow: hidden;

                .title {
                    font-size: $font-base + 2upx;
                    color: $font-color-dark;
                    line-height: 1;
                }

                .attr-box {
                    font-size: $font-sm + 2upx;
                    color: $font-color-light;
                    padding: 10upx 12upx;
                }

                .price {
                    font-size: $font-base + 2upx;
                    color: $font-color-dark;

                    &:before {
                        content: '￥';
                        font-size: $font-sm;
                        margin: 0 2upx 0 8upx;
                    }
                }
            }
        }

        .price-box {
            display: flex;
            justify-content: flex-end;
            align-items: baseline;
            padding: 20upx 30upx;
            font-size: $font-sm + 2upx;
            color: $font-color-light;

            .num {
                margin: 0 8upx;
                color: $font-color-dark;
            }

            .price {
                font-size: $font-lg;
                color: $font-color-dark;

                &:before {
                    content: '￥';
                    font-size: $font-sm;
                    margin: 0 2upx 0 8upx;
                }
            }
        }

        .action-box {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 100upx;
            position: relative;
            padding-right: 30upx;
        }

        .action-btn {
            width: 160upx;
            height: 60upx;
            margin: 0;
            margin-left: 24upx;
            padding: 0;
            text-align: center;
            line-height: 60upx;
            font-size: $font-sm + 2upx;
            color: $font-color-dark;
            background: #fff;
            border-radius: 100px;

            &:after {
                border-radius: 100px;
            }

            &.recom {
                background: #fff9f9;
                color: $base-color;

                &:after {
                    border-color: #f7bcc8;
                }
            }
        }
    }


    /* load-more */
    .uni-load-more {
        display: flex;
        flex-direction: row;
        height: 80upx;
        align-items: center;
        justify-content: center
    }

    .uni-load-more__text {
        font-size: 28upx;
        color: #999
    }

    .uni-load-more__img {
        height: 24px;
        width: 24px;
        margin-right: 10px
    }

    .uni-load-more__img>view {
        position: absolute
    }

    .uni-load-more__img>view view {
        width: 6px;
        height: 2px;
        border-top-left-radius: 1px;
        border-bottom-left-radius: 1px;
        background: #999;
        position: absolute;
        opacity: .2;
        transform-origin: 50%;
        animation: load 1.56s ease infinite
    }

    .uni-load-more__img>view view:nth-child(1) {
        transform: rotate(90deg);
        top: 2px;
        left: 9px
    }

    .uni-load-more__img>view view:nth-child(2) {
        transform: rotate(180deg);
        top: 11px;
        right: 0
    }

    .uni-load-more__img>view view:nth-child(3) {
        transform: rotate(270deg);
        bottom: 2px;
        left: 9px
    }

    .uni-load-more__img>view view:nth-child(4) {
        top: 11px;
        left: 0
    }

    .load1,
    .load2,
    .load3 {
        height: 24px;
        width: 24px
    }

    .load2 {
        transform: rotate(30deg)
    }

    .load3 {
        transform: rotate(60deg)
    }

    .load1 view:nth-child(1) {
        animation-delay: 0s
    }

    .load2 view:nth-child(1) {
        animation-delay: .13s
    }

    .load3 view:nth-child(1) {
        animation-delay: .26s
    }

    .load1 view:nth-child(2) {
        animation-delay: .39s
    }

    .load2 view:nth-child(2) {
        animation-delay: .52s
    }

    .load3 view:nth-child(2) {
        animation-delay: .65s
    }

    .load1 view:nth-child(3) {
        animation-delay: .78s
    }

    .load2 view:nth-child(3) {
        animation-delay: .91s
    }

    .load3 view:nth-child(3) {
        animation-delay: 1.04s
    }

    .load1 view:nth-child(4) {
        animation-delay: 1.17s
    }

    .load2 view:nth-child(4) {
        animation-delay: 1.3s
    }

    .load3 view:nth-child(4) {
        animation-delay: 1.43s
    }

    @-webkit-keyframes load {
        0% {
            opacity: 1
        }

        100% {
            opacity: .2
        }
    }

    /* Product Info */
    .product-info {
        display: flex;
        margin-top: 10px;
    }

    .product-image {
        width: 80px;
        height: 80px;
        margin-right: 10px;
    }

    .product-details {
        margin-left: 10px;
        line-height: 30rpx;
        flex: 1;
    }

    .product-name {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: bold;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .product-description {
        color: #888;
        margin-top: 5px;
    }

    .product-price {
        color: #ff4d4f;
        margin-top: 5px;
    }

    .assign-button {
        width: 150rpx;
    }
</style>